<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/23 0023
  Time: 下午 2:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>wms</title>
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <style>



        .layui-form-item input{
            width: 40%;
        }
        .layui-form-select .layui-input{
            padding-right: 0;
            margin-left: 25px;
            width: 175px;
        }
        .layui-form-select dl{
            margin-left: 25px;
        }
        .layui-btn{
            margin-top: 10px;
            width: 60px;
            height: 60px;
            border-radius: 30px;
        }
        .btn{
            margin-left: 187px;
            margin-top: 25px;
        }
        h3{
            text-align: center;
            font-size: 20px;
        }

    </style>
</head>
<body>
<div class="box-padding-15">
            <span class="layui-breadcrumb">
              <a href="/" target="_top">首页</a>
              <a href="javascript:;">出库管理</a>
              <a><cite>空桶清理</cite></a>

            </span>
    <hr>

        <form class="layui-form " action="/order/dj3" method="post"  id="formid">


              <div class="layui-form-item">
                                     <h3>空桶信息浏览</h3>
                  <div class="btn">
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn red" type="button"  style="background: red;">非空</button>
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn red" type="button"  style="background: red">非空</button>

                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn red" type="button"  style="background: red">非空</button>
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn red" type="button"  style="background: red">非空</button>

                  <br>
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn red" type="button"  style="background: red">非空</button>
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn red" type="button"  style="background: red">非空</button>
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>

                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn red" type="button"  style="background: red">非空</button>
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                  <button class="layui-btn green" type="button"  style="background: green">空桶</button>

                      <br>

                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                      <button class="layui-btn red" type="button"  style="background: red">非空</button>
                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>

                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                      <button class="layui-btn red" type="button"  style="background: red">非空</button>
                      <button class="layui-btn red" type="button"  style="background: red">非空</button>
                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>

                      <br>
                      <button class="layui-btn red" type="button"  style="background: red">非空</button>
                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                      <button class="layui-btn red" type="button"  style="background: red">D3</button>
                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                      <button class="layui-btn red" type="button"  style="background: red">非空</button>

                      <button class="layui-btn red" type="button"  style="background: red">非空</button>
                      <button class="layui-btn green" type="button"  style="background: green">空桶</button>
                      <button class="layui-btn red" type="button"  style="background: red">非空</button>
                      <button class="layui-btn red" type="button"  style="background: red">非空</button>

                  </div>
              </div>
            <div class="layui-input-block" style="margin-left: 380px">
                <button class="layui-btn" type="button" style="border-radius: 0;width: 90px;height: 35px;margin-left: 15px " id="b">确认清理</button>
                <button class="layui-btn" type="button" style="border-radius: 0;width: 90px;height: 35px;margin-left: 15px " id="bt">全部清理</button>
            </div>
         </form>

</div>

      <script src="/static/plugins/jquery-3.2.1.min.js"></script>
      <script src="/static/plugins/layui/layui.js"></script>
<script>
        layui.use(['laydate','element','form'], function(){
        var laydate = layui.laydate;
        var element = layui.element;
        var form = layui.form;
            var count=0;
       $(".red").click(function () {
           count=0;
           layer.open({
               content:'NO，该处桶不是空桶！',
               btn:'返回'
           })
       })
            $(".green").click(function () {
                 count++;
                if(count%2!=0){
                    $(this).css("background","blue")
                }else{
                    $(this).css("background","green")
                }
            })
            $("#bt").click(function () {
                layer.open( {
                    content:'注意，选择执行空桶将陆续全部出库',
                    btn: ['确认执行', '放弃操作']
                        ,yes: function(index, layero){
                        layer.open({
                            content:'指令已发布，plc启动中...',
                        })
                    },btn2: function(index, layero){
                        //按钮【按钮二】的回调
                    }
                })
            })

            $("#b").click(function () {
                if(count%2==0){
                    layer.open( {
                        content:'操作失败，请至少选择一处空桶',
                        btn: ['返回']
                    })
                }else{
                    layer.open( {
                        content:'Yes，点击执行所选空桶将出库',
                        btn: ['执行', '放弃']
                        ,yes: function(index, layero){
                            layer.open({
                                content:'指令已发布，plc启动中...',
                            })
                        },btn2: function(index, layero){
                            //按钮【按钮二】的回调
                        }
                    })
                }

            })











        })

</script>
</body>
</html>
